<template>
  <div class="comFormArea">
    <div class="form">
      <slot name="form"></slot>
    </div>
    <div class="dialog">
      <el-dialog
        :title="title"
        :visible.sync="show"
        :close-on-click-modal:="closeOnClickModal"
        :before-close="cancel"
        append-to-body
        fullscreen
      >
        <el-scrollbar :key="componentKey">
          <slot name="dialog"></slot>
        </el-scrollbar>
        <span slot="footer" class="dialog-footer">
          <el-button size="medium" @click="cancel">取 消</el-button>
          <el-button size="medium" type="primary" @click="save"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  name: "com-form-area",
  props: {
    visible: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    title: {
      type: String,
      default: () => {
        return "";
      }
    },
    fullscreen: {
      type: Boolean,
      default: () => {
        return true;
      }
    }
  },
  data() {
    return {
      componentKey: 0,
      closeOnClickModal: false,
      show: false
    };
  },
  watch: {
    visible(neuValue) {
      this.show = neuValue;
      if (neuValue) {
        ++this.componentKey;
      }
    }
  },
  mounted() {},
  methods: {
    save() {
      this.$emit("save");
    },
    cancel(done) {
      this.$emit("cancel", done);
    }
  }
};
</script>

<style scoped lang="scss">
.comFormArea {
  height: calc(100%);

  .form {
    // height: calc(100%);

    ::v-deep .formStyle {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;

      ::v-deep .comForm {
        overflow-y: auto;
      }

      ::v-deep .formButtons {
        height: 50px;
      }
    }
  }
}

::v-deep .block.fixed {
  position: relative;
  background: white;
  width: calc(100% - 30px);
  z-index: 1200;
  height: 40px;
  padding: 10px 0;
  margin-left: -10px;
}
</style>
